<template>
  <div class="app-container">
    <el-card :body-style="{ 'padding-left': '40px' }">
      <el-form
        ref="queryForm"
        :model="form"
        label-position="top"
        label-width="100px"
        label-suffix=":"
        :rules="rules"
      >
        <dk-form :form-input="formList" :span-num="1" :rule-form="form" />

        <el-form-item
          v-if="form.bannerType"
          label="视频"
          name="imgUrl"
          prop="imgUrl"
        >
          <video
            v-if="form.imgUrl != ''"
            :src="domain + form.imgUrl"
            style="width: 100px; height: 100px"
            controls
          ></video>
           
          <VideoUpload
            v-else
            v-model="form.imgUrl"
            :limit="1"
            :file-size="10"
            tips-text="可上传1个视频，建议大小不能超过10M"
          />
          <img v-if="form.imgUrl !== ''" class="close" src="@/assets/images/ic_del.png" @click="onDeleted(index)">
        </el-form-item>
        <el-form-item label="图片" name="imgUrl" prop="imgUrl" v-else>
          <ImageUpload
            v-model="form.imgUrl"
            :limit="1"
            :file-size="3"
            :is-show-tip="true"
            tips-text="可上传1张图片，建议尺寸76*76px，大小建议不能超过3M"
          />
        </el-form-item>
      </el-form>
    </el-card>
    <el-card
      style="margin-top: 20px"
      :body-style="[{ 'padding-left': '40px' }]"
    >
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </el-card>
  </div>
</template>
<script>
// 接口api：first step
import {
  addBanner,
  getBannerInfo,
  editBanner,
} from '@/api/merchant-store-manage/rotation-manage.js';
import { imgDomain } from '@/configs/env';

export default {
  data() {
    return {
      imgClear:true,
      domain: imgDomain,
      loading: false,

      // 表单对象：two step
      form: {
        bannerName: undefined,
        id: undefined,
        imgUrl: '',
        sort: 0,
        status: 0,
        bannerType: 1,
      },
      // 表单配置项：three step
      formList: [
        {
          label: '轮播图名称',
          placeholder: '请输入',
          type: 'input',
          name: 'bannerName',
          prop: 'bannerName',
          maxlength: 30,
        },
        {
          label: '排序',
          placeholder: '请输入0-999,不输入默认为0',
          type: 'inputNumber',
          name: 'sort',
          prop: 'sort',
          max: 999,
          maxlength: 3,
        },
        {
          label: '状态',
          type: 'radio',
          name: 'status',
          prop: 'status',
          list: [
            { name: '正常', value: 0 },
            { name: '禁用', value: 1 },
          ],
        },
        {
          label: '轮播图类型',
          type: 'radio',
          name: 'bannerType',
          prop: 'bannerType',
          fun:()=>{
            this.form.imgUrl = ''
          },
          list: [
            { name: '图片', value: 0 },
            { name: '视频', value: 1 },
          ],
          
        },
      ],
      // 校验对象：four step
      rules: {
        bannerName: [
          { required: true, message: '请输入轮播图名称', trigger: 'blur' },
        ],
        status: [{ required: true, message: '请选择状态', trigger: 'change' }],
        bannerType: [
          { required: true, message: '请选择轮播图类型', trigger: 'change' },
        ],
        imgUrl: [{ required: true, message: '请上传图片', trigger: 'change' }],
      },
      // 接口存储对象：five step
      interfaceObj: {
        editApiName: editBanner,
        addBanAipName: addBanner,
        getInfoAipName: getBannerInfo,
      },
    };
  },
  created() {
    const { uuid } = this.$route.params;
    if (uuid) {
      this.form.id = uuid;
      this.loading = true;
      this.$nextTick(() => {
        this.network().getDetail();
      });
    }

    
  },
  methods: {
    
    // 删除
    onDeleted(index) {
      this.form.imgUrl = ''
      this.imgClear = false
    },
    cancel() {
      this.$router.go(-1);
    },
    submit() {
      const throttleStatus = this.throttle(); // 节流
      if (!throttleStatus) return;
      this.$refs['queryForm'].validate((valid) => {
        if (valid) {
          if (this.form.id !== undefined) {
            this.network().editForm();
          } else {
            this.network().addForm();
          }
        }
      });
    },
    network() {
      return {
        // 详情
        getDetail: async () => {
          const { getInfoAipName } = this.interfaceObj;
          const { data } = await getInfoAipName({
            id: this.form.id,
          });
          if (data) {
            Object.assign(this.form, data);
          }
         
          this.loading = false;
        },
        // 新增
        addForm: async () => {
          const obj = {
            ...this.form,
            createBy: this.$store.state.user.name,
          };
          const { addBanAipName } = this.interfaceObj;
          const { code } = await addBanAipName(obj);
          if (code === 0) {
            this.$modal.msgSuccess('新增成功');
            this.resetForm('queryForm');
            this.$router.go(-1);
          }
        },
        // 编辑
        editForm: async () => {
          const obj = {
            ...this.form,
            updateBy: this.$store.state.user.name,
          };
          const { editApiName } = this.interfaceObj;
          const { code } = await editApiName(obj);
          if (code === 0) {
            this.$modal.msgSuccess('编辑成功');
            this.resetForm('queryForm');
            this.$router.go(-1);
          }
        },
      };
    },
  },
};
</script>
<style scoped>
    .close {
      width: 20px;
      height: 20px;
      position: absolute;
      top: -10px;
      left: 90px;
      cursor: pointer;
    }
</style>
